<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :active="'business'" />
    <div class="page-main">
      <div class="page-box">
        <div class="b-card hv-scale" v-for="(item, index) in list" :key="index" v-show="index < 3">
          <img oncontextmenu="return false" :src="item.photo" class="photo fit-img" alt="">
          <div class="card-inner">
            <div class="card-title">{{ item.title }}</div>
            <div class="card-desc" v-html="item.titles"></div>
            <div class="card-btn flex-center" :class="{'active': curIndex == index}" @mouseover="curIndex = index">
              <img oncontextmenu="return false" src="@/assets/images/icon_message.svg" class="icon">
              <div class="label">立即联系</div>
            </div>
          </div>
          <div class="card-main" :class="{'active': curIndex == index}" @mouseleave="curIndex = -1">
            <div class="cardm-title">联系我们</div>
            <div class="cardm-desc">微信扫描二维码，立即与我联系吧</div>
            <div class="cardm-qr flex-center">
              <img oncontextmenu="return false" :src="item.qr" alt="" class="qr">
            </div>
            <div class="cardm-cells">
              <div class="cardm-cell flex-between">
                <div class="key">招商部联系人：</div>
                <div class="value">{{ item.contact_name }}</div>
              </div>
              <div class="cardm-cell flex-between">
                <div class="key">联系方式: </div>
                <div class="value">{{ item.contact_mobile }}</div>
              </div>
              <div class="cardm-cell flex-between">
                <div class="key">咨询热线：</div>
                <div class="value">{{ item.contact_tel }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { hideLoading } from '@/utils/utils'
import { getBusinessInfo } from '@/api/business' 

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'
import { formatText } from '../../utils/utils'

const theme = ref('white')
const list = ref([])
const curIndex = ref(-1)

onMounted(() => {
  loadData()
});

const loadData = () => {
  getBusinessInfo().then(res => {
    list.value = res.data.map(el => {
      el.titles = formatText(el.titles)
      return el
    })
    hideLoading()
  })
};
</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
.page-main {
  padding-top: 5rem /* 80/16 */;
  padding-bottom: 3.125rem /* 50/16 */;
  /* height: 100vh; */
  width: 91.6vw;
  margin: 0 auto;
}
.page-box {
  width: 91.6vw;
  height: 45.3125vw;
  display: flex;
  justify-content: space-between;
}
.b-card {
  width: 29.427vw;
  height: 45.3125vw;
  position: relative;
  overflow: hidden;
}
.card-inner {
  position: absolute;
  bottom: 3.125vw;
  width: 71.6%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  .card-title {
    font-size: 1.875rem /* 30/16 */;
    line-height: 1;
    font-weight: 500;
    color: #FFFFFF;
  }
  .card-desc {
    margin-top: 1.25rem /* 20/16 */;
    font-size: .9375rem /* 15/16 */;
    line-height: 1.625rem /* 26/16 */;
    color: #F2F2F2;
    text-align: center;
  }
  .card-btn {
    margin-top: 1.875rem /* 30/16 */;
    width: 9.6875rem /* 155/16 */;
    height: 3.125rem /* 50/16 */;
    border-radius: 2px;
    border: 1px solid #FFFFFF;
    cursor: pointer;
    &.active {
      background: #E50012;
      border-color: #E50012;
    }
    .icon {
      width: 1.375rem /* 22/16 */;
      height: 1.375rem /* 22/16 */;
    }
    .label {
      margin-left: .375rem /* 6/16 */;
      color: #FFFFFF;
      font-size: 1rem /* 16/16 */;
    }
  }
}
.card-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4.4375rem /* 71/16 */);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: all .3s ease-in-out;
  visibility: hidden;
  z-index: -1;
  &.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
  }
}
.cardm-title {
  text-align: center;
  font-size: 1.875rem /* 30/16 */;
  line-height: 1;
  color: #FFFFFF;
  font-weight: 500;
}
.cardm-desc {
  margin-top: 1.25rem /* 20/16 */;
  text-align: center;
  color: #F2F2F2;
  font-size: .9375rem /* 15/16 */;
  line-height: 1.625rem /* 26/16 */;
}
.cardm-qr {
  width: 13.02vw;
  height: 13.02vw;
  margin-top: 3.75rem /* 60/16 */;
  background: url(@/assets/images/qr_bg.png) no-repeat center center /100% 100%;
  .qr {
    width: 9.0625vw;
    height: 9.0625vw
  }
}
.cardm-cells {
  margin-top: 2.8125rem /* 45/16 */;
  width: 16.875rem /* 270/16 */;
}
.cardm-cell {
  color: #FFFFFF;
  font-size: 1.125rem /* 18/16 */;
  line-height: 2.5rem /* 40/16 */;
  color: #FFFFFF;
  &+.cardm-cell {
    margin-top: .3125rem /* 5/16 */;
  }
}
</style> 